<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        height: 200vh;
        width: 200vw;
    }
    main {
        border: 2px solid palevioletred;
        width: 50vw;
        height: 50vh;
        margin: 100px;

        /*position: relative;*/
    }
    div:first-child {
        width: 200px;
        height: 200px;
        background-color: orange;

        /*静态定位*/
        /*静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。*/
        /*position: static;*/

        /*相对定位*/
        /*相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似，占据在正常的文档流中，
        除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。*/
        /*top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。*/
        /*position: relative;*/
        /*left: 50px;*/
        /*top: 70px;*/

        /*绝对定位*/
        /*绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先*/
        /*哪个元素是绝对定位元素的“包含元素”？*/
        /*这取决于绝对定位元素的父元素的position属性。如果所有的父元素都没有显式地定义position属性，
        那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。
        这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。
        简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。
        我们可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 ——
        也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。*/
        /*position: absolute;*/
        /*left: 50px;*/
        /*top: 70px;*/

        /*固定定位*/
        /*还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：*/
        /*绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 */
        /*这意味着您可以创建固定的有用的UI项目，如持久导航菜单。*/
        /*position: fixed;*/
        /*left: 100px;*/
        /*top: 50px;*/

        /*position: sticky*/
        /*还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，*/
        /*它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。*/
        /*例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。*/
        position: sticky;
        left: 20px;
        top: 40px;
    }
</style>
<body>
<main>
    <div></div>
    <p>红红火火恍恍惚惚嘻嘻哈哈嚯嚯嚯嚯</p>
</main>
</body>
</html>